<template>
  <!-- 门店管理 -->
  <div class="mod-marketing-distribution">
    <el-tabs
      v-model="tabValue"
      @tab-click="changeTab"
    >
      <el-tab-pane
        :label="$t('outlet.setUpOutlet')"
        name="outlet"
      >
        <outlet
          ref="outlet"
          :tabValue="tabValue"
        />
      </el-tab-pane>
      <!-- <el-tab-pane
        :label="$t('shop.applicationForStoreOpening')"
        name="management"
      >
       <outlet ref="outlet" :unreview="true" :tabValue="tabValue"  />
      </el-tab-pane> -->

      <el-tab-pane
        :label="$t('shop.applicationForStoreOpening')"
        name="management"
      >
        <management
          ref="management"
          :tabValue="tabValue"
        />
      </el-tab-pane>
      <el-tab-pane
        label="绑定商户信息"
        name="bindMerchantIdentificationNumber"
      >
        <bindPayNumber
          v-if="tabValue == 'bindMerchantIdentificationNumber'"
          ref="bindMerchantIdentificationNumber"
        />
      </el-tab-pane>
      <el-tab-pane
        label="待审核二维码"
        name="qrCodeToAudited"
      >
        <qrCodeAudited
          v-if="tabValue == 'qrCodeToAudited'"
          ref="qrCodeToAudited"
        />
      </el-tab-pane>
      <!-- <el-tab-pane :label="$t('shop.changeBusinessInfor')" name="application">
        <businessInformationApplication ref="businessInformationApplication" :tabValue="tabValue"/>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import outlet from "./auditOutlet-basic.vue";
import management from "./account-management-outlet.vue";
import businessInformationApplication from "./business-information-application-outlet";
import bindPayNumber from "./payNumberBind.vue"
import qrCodeAudited from './qr-code-audited.vue';
export default {
  name: "platform-auditShop",
  components: {
    outlet,
    management,
    businessInformationApplication,
    bindPayNumber,
    qrCodeAudited
  },
  data() {
    return {
      tabValue: "outlet",
    };
  },
  created() {
    if (this.$route.query.tabValue) {
      this.tabValue = this.$route.query.tabValue;
    }
  },
  activated() {
    if (this.tabValue === "outlet") {
      this.$refs.outlet.getDataList();
    } else if (this.tabValue === "management") {
      this.$refs.management.getDataList();
    } else {
      this.$refs.businessInformationApplication.handleTabClick();
    }
  },
  methods: {
    changeTab(e) {
      console.log();
      this.$nextTick(() => {
        this.$refs[this.tabValue].searchChange(true);
      })
    }
  }
};
</script>

<style scoped>
div >>> .el-col-md-6 {
  width: 30%;
}
</style>
